<template>
	<view class="content" @click="changePercent(true)">
		<view class="box animate__animated animate__rubberBand"></view>
		<u-circle-progress 
			active-color="#2979ff" 
			bg-color="transparent"
			:percent="percent % 100"
			data-v-step="2">
			<view class="u-progress-content">
				<view class="u-progress-dot"></view>
				<text class='u-progress-info'>查找中</text>
			</view>
		</u-circle-progress>
		<LineProcess 
			:percentBefore="percentBefore"
			:percent="percent" />
		<view id="EHRCode">
			<u-button @click="reducePercent">按钮</u-button>
		</view>
		<!-- 选中 -->
		<view 
			class="eyes animate__animated animate__infinite"
			:class="{
				'animate__flipOutX': true,
				'animate__zoomOut': false,
			}"></view>
		<view class="jump" :class="{ 'my-animate': isAdd }"></view>
		<!-- animate__animated animate__wobble animate__infinite -->
		<image 
			class="chicken"
			:class="{ 'my-animate': isAdd }"
			id="SpareEmail"
			src="/static/images/chicken/chicken_1.png" 
			mode="widthFix"></image>

		<!-- 引导页 -->
		<!-- <v-tour 
			v-if="isTourShow"
			name="myTour" 
			:steps="steps"
			:options="myOptions"
			:callbacks="myCallbacks"></v-tour> -->
		<MyTour />
	</view>
</template>

<script>
	import LineProcess from '@/components/lineProcess';
	import MyTour from '@/components/myTour';
	import { WxLogin } from '@/config/chicken';
	
	export default {
		components: {
			LineProcess,
			MyTour,
		},
		data() {
			return {
				percentBefore: 90,
				percent: 90,
				
				isAdd: false,
				isTourShow: false,
				myOptions: {
					useKeyboardNavigation: false,
					highlight: true,
					labels: {
						buttonSkip: '跳过引导教程',
						buttonPrevious: '上一步',
						buttonNext: '下一步',
						buttonStop: '结束',
					},
				},
				myCallbacks: {
					onStop: () => {
						console.log('停止了');
						this.isAdd = true;
					},
				},
				steps: [
					{
						target: '#SpareEmail',
						content: `这是步骤内容<strong>Vue Tour</strong>!`
					},
					{
						target: '#EHRCode',
						content: '这是步骤内容'
					},
					{
						target: '[data-v-step="2"]',
						content: '这是步骤内容',
						params: {
							placement: 'top'
						}
					}
				],
			}
		},
		onLoad() {
			console.log('=======', wx);
		},
		onReady() {
			console.log('加载完成');
			this.init();
		},
		methods: {
			init() {
				this.isTourShow = true;
				this.$nextTick(() => {
					this.$tours['myTour'] && this.$tours['myTour'].start();
				});
			},
			changePercent(flag) {
				this.percentBefore = this.percent;
				if (flag) {
					this.percent += 10;
				} else {
					this.percent -= 10;
				}
			},
			reducePercent() {
				this.percent -= 100;
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken {
	position: absolute;
	left: 30%;
	bottom: 10%;
	width: 40%;
	transform-origin: center bottom;
	&.my-animate {
		animation: rotate-img 1s infinite;
	}
}
@keyframes rotate-img {
	0% {
		// transform: rotate(0);
		// transform: scale3d(1, 1, 1);
		transform: skew(0) scaleY(1);
	}
	25% {
		// transform: rotate(1deg);
		// transform: scale3d(.98, 1, 1);
		transform: skew(1deg) scaleY(.999);
	}
	50% {
		// transform: rotate(0);
		// transform: scale3d(1, 1, 1);
		transform: skew(0) scaleY(1);
	}
	75% {
		// transform: rotate(-1deg);
		// transform: scale3d(.98, 1, 1);
		transform: skew(-1deg) scaleY(.999);
	}
	100% {
		// transform: rotate(0);
		// transform: scale3d(1, 1, 1);
		transform: skew(0) scaleY(1);
	}
}

.eyes {
	width: 100rpx;
	height: 100rpx;
	background-color: red;
}

.jump {
	width: 200rpx;
	height: 200rpx;
	margin-top: 100rpx;
	background-color: gray;
	clip-path: polygon(0 0, 20% 20%, 40% 50%, 60% 70%, 80% 80%, 100% 0);
	&.my-animate {
		// animation: jump 3s infinite;
	}
}
@keyframes jump {
	0% {
		margin-top: 20px;
		margin-left: 30px;
	}
	50% {
		margin-top: 0;
		margin-left: 0;
	}
	100% {
		margin-top: 20px;
		margin-left: 30px;
	}
}

// vue-tour引导页
.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0,0,0,.4);
}
::v-deep .v-step {
	background-color: rgba(red, .4);
}
</style>
